<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style media="screen">
    body{
        padding-top: 1.5rem;
    }
    .header{
          width: 94%;
          height: 3rem;
          line-height: 3rem;
          padding: 0.5rem 0.8rem;
          text-align: center;
          position: fixed;
          top:1.5rem;
          background-color: #fff;
          z-index: 999;
      }
      .header_img{
        width: 6%;
        height: 45%;
        float: left;
        margin-top: 0.5rem;
      }
    .header_imgs{
      width: 8%;
      height: 58%;
      margin-top: 0.5rem;
      margin-left: 1rem;
    }
    .header_imgs img{
      width: 100%;
      height: 100%;
    }
    .header_img img{
      width: 100%;
      height: 100%;
    }
    .header h3{
      width: 50%;
      text-align: center;
      line-height: 3rem;
      margin-left: 3rem;
    }
    .fr{
      float: right;
    }
    .fl{
      float: left;
    }
    .nav{
      width: 100%;

      margin-top: 3.5rem;
      border-bottom: 0.3rem solid rgb(242, 242, 242, 0.5);
    }
    .ba{
      width: 100%;
      height:10rem;
      position: relative;
    }
    .ba img{
      width: 100%;
      height: 100%;
    }
    .ef{
      width: 23%;
      height: 11%;
      position: absolute;
      top:25%;
      left: 5%;
    }
    .ef img{
      width: 100%;
      height: 100%;
    }
    .ef_top{
      width: 93%;
      height: auto;
      padding: 0.5rem 0.8rem;
      margin-top: 3rem;
      padding-bottom: 1rem;
      border-bottom:1px solid rgb(242, 242, 242, 0.5);
    }
    .ef_top p{
      color: #ccc;
      font-size: 1rem;
      margin-top: 0.7rem;
    }
    .main{
      width: 93%;
      height: 1rem;
      line-height: 1rem;
      padding: 0.8rem 0.8rem;
    }
    .main_img{
      width: 4%;
      height:100%;
      margin-right: 0.5rem;
    }
    .main_img img{
      width: 100%;
      height: 100%;
    }
    .main a{
      color: #4c629c;
    }
    .all{
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      padding: 0rem 0rem 0.3rem 0rem;
      background-color: rgb(242, 242, 242, 0.5);
    }
    .all ul{
      background-color: #fff;
      height: 3rem;
      width: 94%;
      padding: 0rem 0.8rem;
    }
    .all ul li{
      float: left;
      width: 25%;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
    }
    .all ul li a{
      list-style: none;
      text-decoration: none;
      color: black;
      font-weight: bold;
    }
    #lia{
      color: #40cccc;
        border-bottom: 0.2rem solid #40cccc;
    }
    .now{
      width: 94%;
      padding: 1rem 0.8rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .now_one{
      width: 48%;
      margin-top: 1rem;
      height: 14.5rem;
    }
    .now_one p{
      width: 100%;
      overflow : hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
    }
    .one_img{
      width: 100%;
      height: 9rem;
    }
    .one_img img{
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../image/u6.png" alt="" onclick="closewin()">
      </div>
      <h3 class="fl">品牌详情</h3>
      <div class="header_imgs fr">
        <!-- <img src="../image/aaw.png" alt="" onclick="closewin('shop')"> -->
      </div>
      <div class="header_imgs fr">
        <!-- <img src="../image/u36.png" alt="" onclick="closewin('shop')"> -->
      </div>

    </div>
    <div class="nav">
      <div class="ba">
        <img src="../image/a8.png" alt="" id="back_url">
      </div>
      <div class="ef">
        <img src="../image/u53.png" alt="" id="head_url">
      </div>
      <div class="ef_top">
        <h3 id="mec_name"></h3>
        <p id="mec_title"></p>
      </div>
      <div class="main">
        <div class="main_img fl">
          <img src="../image/aa1.png">
        </div>
        <a href="#" id="address"></a>
      </div>

    </div>
    <!-- 全部 -->
    <div class="all">
      <ul id="mecfic">
        <li ><a href="#" id="lia" class="fics" onclick="set_fic(this,0)">全部</a></li>

      </ul>
    </div>
    <div class="now" id="curlist">
      <!-- <div class="now_one">
        <div class="one_img">
          <img src="../image/u28.jpg" alt="">
        </div>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem;">3-6岁探索课程</p>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">培养软技能帮助性格养成</p>
        <p style="font-size:1.1rem;margin-top:0.5rem;">￥2800.80</p>
      </div> -->

    </div>
  </body>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
      var id
      var page = 1;
      var pagesize = 10;
      var fic=0
      var ok = true
      apiready = function(){
        id = api.pageParam.id
        console.log('shopid:' + id);
        get_mecshop()//获取店铺信息
        get_mecfic()//获取店铺分类
        get_curlist()//获取店铺课程
        api.addEventListener({
             　　name:'scrolltobottom',
                 extra:{threshold:0}
             }, function(ret, err){
      　　　　　　get_curlist()
            });
      };


      function set_fic(self,keys) {
        fic = keys
        $("#curlist").html('')
        var fic_list = document.getElementsByClassName('fics')
        for (var i = 0; i < fic_list.length; i++) {
          $(fic_list[i]).attr('id','i'+i)
        }
        ok = true
        $(self).attr('id','lia')
        page = 1;
        get_curlist()
      }
      function opens(id) {
        api.openWin({
            name: 'curlist',
            url: './curlist.html',
            pageParam: {
                        id: id
                    }
        });
      }

      function get_curlist() {
        if(ok==false){
          return false
        }
        var html =''
        var obj = $api.byId('curlist');
        console.log('get_curlist');
        api.ajax({
            url: SITE_URL+'brand_api/cur/index',
            method: 'post',
            data: {
                values: {
                    id: id,
                    page:page,
                    pagesize:pagesize,
                    mecfic:fic
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                  console.log('get_curlist ret.data.length' + ret.data.length);
                if(ret.data.length){

                  for (var i = 0; i < ret.data.length; i++) {
                    var dat = ret.data[i]
                    html +='<div class="now_one" onclick="opens('+dat.id+')">'
                    html +='<div class="one_img">'
                    html +='<img src="'+dat.img_url+'" alt="">'
                    html +='</div>'
                    html +='<p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem;">'+dat.cur_name+'</p>'
                    html +='<p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">'+dat.cur_title+'</p>'
                    html +='<p style="font-size:1.1rem;margin-top:0.5rem;">￥'+dat.price+'</p>'
                    html +='</div>'
                  }
                  $api.html();
                  $api.append(obj, html);
                  page+=1

                }
              }else{
                ok = false
                msgcode('暂无更多课程')
              }
              //  alert( JSON.stringify( ret ) );
            } else {
                //alert( JSON.stringify( err ) );
            }
        });


      }


      function get_mecfic() {
        var html =''
        var obj = $api.byId('mecfic');

        api.ajax({
            url: SITE_URL+'brand_api/mecfic/index',
            method: 'post',
            data: {
                values: {
                    id: id
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<li><a href="#" class="fics"  onclick="set_fic(this,'+dat.id+')">'+dat.name+'</a></li>'
                }
                $api.append(obj, html);

              }
                //alert( JSON.stringify( ret ) );
            } else {
                //alert( JSON.stringify( err ) );
            }
        });

      }



      function get_mecshop() {
        api.ajax({
            url: SITE_URL+'brand_api/index/index',
            method: 'post',
            data: {
                values: {
                    id: id
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                $("#mec_name").html(ret.data.mec_name)
                $("#head_url").attr('src',ret.data.head_url)
                $("#mec_title").html(ret.data.mec_title)
                $("#back_url").attr('src',ret.data.back_url)
                $("#address").html(ret.data.address)
              }else{
                msgcode('调取信息失败')
              }
                //alert( JSON.stringify( ret ) );
            } else {
              msgcode('请检查网络链接')
                //alert( JSON.stringify( err ) );
            }
        });

      }
  </script>
  </html>
